<template>
  <PageWrapper title="我的世界">
    <div style="padding: 20px; background-color: #ececec">
      <a-row :gutter="[16, 16]">
        <a-col :span="6">
          <a-card :bordered="false">
            <a-form
              ref="formRef"
              :model="formState"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              :rules="rules"
            >
              <a-form-item name="router" label="模块英文名">
                <a-input v-model:value="formState.router" />
              </a-form-item>
              <a-form-item name="name" label="模块中文名">
                <a-input v-model:value="formState.name" />
              </a-form-item>
              <a-form-item name="json" label="模块json配置">
                <a-textarea v-model:value="formState.json" />
              </a-form-item>
              <a-form-item :wrapper-col="{ span: 20, offset: 4 }">
                <div style="display: flex; justify-content: center">
                  <a-button type="primary" @click="onSubmit">提交</a-button>
                </div>
              </a-form-item>
            </a-form>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card
            :bordered="false"
            :bodyStyle="{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
            }"
          >
            <p>新增</p>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { reactive, toRaw, ref } from 'vue';
  import type { UnwrapRef } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import type { Rule } from 'ant-design-vue/es/form';

  interface FormState {
    router: string;
    name: string;
    json: string;
  }
  const formRef = ref();
  const formState: UnwrapRef<FormState> = reactive({
    router: '',
    name: '',
    json: '',
  });
  const rules: Record<string, Rule[]> = {
    router: [{ required: true, message: '请输入模块英文名', trigger: 'change' }],
    name: [{ required: true, message: '请输入模块中文名', trigger: 'change' }],
    json: [{ required: true, message: '请输入模块json', trigger: 'change' }],
  };
  const onSubmit = () => {
    console.log('submit!', toRaw(formState));
    formRef.value
      .validate()
      .then(() => {
        console.log('values', formState, toRaw(formState));
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
  const labelCol = { style: { width: '150px' } };
  const wrapperCol = { span: 14 };
</script>
<style scoped></style>
